@import "../../../styles/bootstrap-variables";
@import "bootstrap/scss/modal";
.bs-modal{
  display: block;
  &.modal-freedom{
    position: fixed;
    top: 0;
    left: 0;
  }
  &.modal-opened{
    overflow-x: hidden;
    overflow-y: auto;
  }
  &.fade-enter-from,
  &.fade-leave-to{
    opacity: 0;
    transform: translateY(-15%);
  }
  &.fade-enter-active,
  &.fade-leave-active{
    transition: transform .3s, opacity .3s;
  }
  &.fade-enter-to,
  &.fade-leave-from{
    opacity: 1;
    transform: translateY(0);
  }
  &.modal-fullscreen{
    &.fade-enter-from,
    &.fade-leave-to{
      transform: translateY(0) scale(0.6);
    }
    .modal-dialog{
      max-width: 100%;
      height: 100%;
      margin: 0;
    }
    .modal-content{
      height: 100%;
      border-radius: 0;
      box-shadow: none;
    }
  }
  .close{
    &:focus{
      box-shadow: none;
    }
  }
  .modal-content{
    border: none;
    box-shadow: 0 0.1875rem 0.375rem -0.25rem #0000001f,
    0 0.375rem 1rem #00000014,
    0 0.5rem 1.65rem 0.5rem #0000000d;
  }
  &.modal-freedom{
    padding: 1px 1rem;
    .modal-content{
      box-shadow: 0 0 0.5rem #0000002f
    }
  }
}


@media (max-width: 576px) {
  .bs-modal{
    &.modal-freedom{
      left: 0!important;
      right: 0!important;
      width: auto!important;
      padding: 1px 0;
    }
  }
}

